const app = new Vue({
  el:'#app',
  data:{
    books:[
    {
      id:1,
      name:'算法导论',
      date:'2006-9',
      price:85.00,
      count:1
    },
    {
      id:2,
      name:'UNIX编程艺术',
      date:'2006-2',
      price:59.00,
      count:2
    },
      {
        id:3,
        name:'编程珠玑',
        date:'2008-9',
        price:39.00,
        count:1
      },
      {
        id:4,
        name:'JAVA编程基础',
        date:'2020-9',
        price:20.00,
        count:1
      }

    ]
  },

  methods:{
    btn_increase(book) {
      book.count++;
    },
    btn_reduce(book){
      if (book.count==1){
        book.count=1;
      }else {
        book.count--;
      }
    },
    btn_delete(index){
      // alert(this.books[bookID].id-1);
      this.books.splice(index,1);
    },

    // getFinalPrice(price){
    //   return '$'+price.toFixed(2);
    //
    // }
  },
  computed:{
    totalPrice(){
      let sum= 0;
      for (let i = 0; i < this.books.length; i++) {

        sum+=this.books[i].count*this.books[i].price;


      }
      return sum;
    },

    //2 使用 另一种for循环  i 是数组的索引值
   totalPrice2(){
      let sum = 0;
      for (let i in this.books){
        sum+=this.books[i].count*this.books[i].price;
      }
      return sum;
    },
    //3
    totalPrice3(){
      let sum = 0;
      for (let item in this.books){
        sum += item.price * item.count;
      }

      return sum;

    },
    //4 使用reduce() 方法



  },
  filters:{
  //  过滤器 是个函数
    showPrice:function (price){
      return '$'+price.toFixed(2);
    }

  }




})